<h1 mat-dialog-title>Task Provider: {{taskProvider.displayName}}</h1>
<div mat-dialog-content [formGroup]="providerForm">

    <mat-progress-bar mode='indeterminate' *ngIf='loading'></mat-progress-bar>

    <mat-form-field class="full-width-input">
      <mat-label>Name</mat-label>
    <input matInput formControlName="name" readonly>
  </mat-form-field>

  <mat-form-field class="full-width-input">
    <mat-label>Display Name</mat-label>
    <input matInput
      formControlName="displayName" readonly>
  </mat-form-field>

  <mat-form-field class="full-width-input">
    <mat-label>Description</mat-label>
    <textarea matInput formControlName="description" readonly></textarea>
  </mat-form-field>

  <mat-form-field class="full-width-input">
    <mat-label>Author</mat-label>
    <input matInput formControlName="author" readonly>
  </mat-form-field>

  <mat-form-field class="full-width-input">
    <mat-label>Version</mat-label>
    <input matInput formControlName="version" readonly>
  </mat-form-field>

  <mat-form-field class="full-width-input">
    <mat-label>Tags</mat-label>
    <mat-chip-list #chipList>
      <mat-chip *ngFor="let tag of taskProvider.tags">{{tag}}</mat-chip>
    </mat-chip-list>
  </mat-form-field>

    <div class="no-records" *ngIf="!loading && additionalConfigs?.length <= 0">
        No Additional Configs Found
      </div>
    <table mat-table [dataSource]="additionalConfigs" matSort *ngIf="additionalConfigs?.length > 0" class="mat-elevation-z8">

        <!--- Note that these columns can be defined in any order.
              The actual rendered columns are set as a property on the row definition" -->

        <!-- Name Column -->
        <ng-container matColumnDef="name">
          <th mat-header-cell *matHeaderCellDef mat-sort-header> Name </th>
          <td mat-cell *matCellDef="let element"> {{element.name}} </td>
        </ng-container>

        <!-- Label Column -->
        <ng-container matColumnDef="label">
          <th mat-header-cell *matHeaderCellDef mat-sort-header> Label </th>
          <td mat-cell *matCellDef="let element"> {{element.label}} </td>
        </ng-container>

        <!-- Type Column -->
        <ng-container matColumnDef="type">
          <th mat-header-cell *matHeaderCellDef mat-sort-header> Type </th>
          <td mat-cell *matCellDef="let element"> {{element.type}} </td>
        </ng-container>

        <!-- IsRequired Column -->
        <ng-container matColumnDef="isRequired">
          <th mat-header-cell *matHeaderCellDef mat-sort-header> Required? </th>
          <td mat-cell *matCellDef="let element"> {{element.isRequired ? 'yes' : 'no'}} </td>
        </ng-container>

        <!-- IsSecret Column -->
        <ng-container matColumnDef="isSecret">
          <th mat-header-cell *matHeaderCellDef mat-sort-header> Is Secret? </th>
          <td mat-cell *matCellDef="let element"> {{element.isSecret ? 'yes' : 'no'}} </td>
        </ng-container>

        <!-- IsInputMasked Column -->
        <ng-container matColumnDef="isInputMasked">
          <th mat-header-cell *matHeaderCellDef mat-sort-header> Input Masked? </th>
          <td mat-cell *matCellDef="let element"> {{element.isInputMasked ? 'yes' : 'no'}} </td>
        </ng-container>

        <!-- AllowedValues Column -->
        <ng-container matColumnDef="allowedValues">
          <th mat-header-cell *matHeaderCellDef mat-sort-header> Allowed Values </th>
          <td mat-cell *matCellDef="let element">
            <mat-chip-list>
                <mat-chip *ngFor="let allowedValue of element.allowedValues">{{allowedValue}}</mat-chip>
            </mat-chip-list>
          </td>
        </ng-container>

        <!-- Hint Column -->
        <ng-container matColumnDef="hint">
          <th mat-header-cell *matHeaderCellDef mat-sort-header> Hint </th>
          <td class="hint-col" mat-cell *matCellDef="let element" matTooltip="{{element.hint}}"> {{element.hint}} </td>
        </ng-container>

        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
        <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
      </table>
  </div>
  <div mat-dialog-actions>
      <button mat-button [mat-dialog-close]="false">Close</button>
  </div>
